<template>
	<div class="top">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>
				<a href="/Classification">课程管理</a>
			</el-breadcrumb-item>
			<el-breadcrumb-item>课程信息管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<div class="middle">
		<el-form :inline="true" :model="queryInfo" class="demo-form-inline form-search">
			<el-form-item label="课程名称">
				<el-input v-model="queryInfo.courseName" placeholder="请输入课程名称" clearable @clear="querydata" />
			</el-form-item>
      <el-form-item label="课程分类">
        <el-select
          v-model="queryInfo.courseClassify"
          placeholder="请选择课程分类"
          clearable
        >
          <el-option
            v-for="item in courseClassifyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 心理导师下拉框 -->
      <el-form-item label="心理师名">
        <el-select
          v-model="queryInfo.consultId"
          placeholder="请选择心理导师"
          clearable
        >
          <el-option
            v-for="item in consultOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
			<el-form-item>
				<el-button type="primary" @click="querydata">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="add">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="remove" :disabled="multipleSelection.length === 0">批量删除</el-button>
			</el-form-item>
		</el-form>
	</div>

	<div class="bottom">
		<el-table
			:data="tableData"
			row-key="id"
			style="width: 100%"
			@selection-change="handleSelectionChange"
			border
			stripe
			class="course-table"
		>
			<el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="课程ID" width="100" align="center" />
      <el-table-column prop="courseName" label="课程名称" width="120" align="center" />
      <!-- 新增缩略图列 -->
      <el-table-column prop="thumbnail" label="缩略图" width="100" align="center">
        <template #default="scope">
          <img
            :src="`${scope.row.thumbnail}`"
            alt="缩略图"
            style="width: 60px; height: 40px; object-fit: cover"
          >
        </template>
      </el-table-column>
      <el-table-column prop="courseTime" label="时长" width="100" align="center" />
      <!-- 修正“视频数量”字段 -->
      <el-table-column prop="videoNumber" label="视频数量" width="100" align="center" />
      <!-- 修正“学习量”字段 -->
      <el-table-column prop="studyNumber" label="学习量" width="100" align="center" />
      <!-- 修正“课程简介”字段 -->
      <!-- 新增：适用人群 -->
      <el-table-column prop="applyPeople" label="适用人群" width="120" align="center" show-overflow-tooltip />
      <!-- 新增：学习收获 -->
      <el-table-column prop="studyGet" label="学习收获" width="120" align="center" show-overflow-tooltip />
      <!-- 新增：订阅须知 -->
      <el-table-column prop="subscribeNotice" label="订阅须知" width="120" align="center" show-overflow-tooltip />

      <el-table-column prop="courseIntroduction" label="简介" width="150" align="center" show-overflow-tooltip />
      <!-- 修正价格字段（示例用“现价”） -->
      <el-table-column prop="newPrice" label="现价" width="100" align="center" />
      <!-- 从关联对象取课程分类名称（假设分类对象的名称字段为name） -->
      <el-table-column prop="courseClassify1.classifyName" label="分类" width="120" align="center" />
      <!-- 从关联对象取心理导师名（假设导师对象的名称字段为name） -->
      <el-table-column label="心理导师名">
        <template #default="{ row }">
          {{ row.consult?.consultName || '暂无' }}
        </template>
      </el-table-column>
			<el-table-column label="操作" width="180" align="center">
				<template #default="scope">
					<el-button size="small" type="primary" @click="editdata(scope.row)">编辑</el-button>
					<el-button size="small" type="danger" @click="deletedata(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="demo-pagination-block">
			<el-pagination
				v-model:current-page="queryInfo.pageNum"
				v-model:page-size="queryInfo.pageSize"
				:page-sizes="[5, 10, 15, 20]"
				:background="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>

	<el-dialog v-model="dialogFormVisible" :title="Title" width="500">
		<el-form :model="form" label-width="110px" class="dialog-form">
			<el-form-item label="课程名称">
				<el-input v-model="form.courseName" autocomplete="off" />
			</el-form-item>
      <el-form-item label="课程缩略图" required class="form-item-align">
        <div class="upload-container">
          <el-upload
            class="thumbnail-uploader"
            :action="baseURL+'upload'"
            :show-file-list="false"
            :on-success="handleThumbnailUploadSuccess"
            :before-upload="beforeThumbnailUpload"
            name="file"
          >
            <img
              v-if="form.thumbnail"
              :src="`${form.thumbnail}`"
              class="thumbnail-preview"
              alt="课程缩略图"
            />
            <div v-else class="thumbnail-placeholder">
              <el-icon class="upload-icon">
                <Plus />
              </el-icon>
              <div class="upload-text">点击上传缩略图</div>
            </div>
          </el-upload>
          <div class="upload-hint">支持JPG/PNG，建议300x200px，不超过2MB</div>
        </div>
      </el-form-item>
			<el-form-item label="课程时长">
				<el-input v-model="form.courseTime" autocomplete="off"  disabled />
			</el-form-item>
			<el-form-item label="视频数量">
				<el-input v-model="form.videoNumber" autocomplete="off"  disabled />
			</el-form-item>
      <el-form-item label="适用人群">
        <el-input v-model="form.applyPeople" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学习收获">
        <el-input v-model="form.studyGet" autocomplete="off" />
      </el-form-item>
      <el-form-item label="订阅须知">
        <el-input v-model="form.subscribeNotice" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程原价">
        <el-input v-model="form.beforePrice" type="number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程现价">
        <el-input v-model="form.newPrice" type="number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程折扣价">
        <el-input v-model="form.courseDiscount" type="number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程分类">
        <el-select v-model="form.courseClassify" placeholder="请选择课程分类">
          <el-option v-for="item in courseClassifyOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="心理导师">
        <el-select v-model="form.consultId" placeholder="请选择心理导师">
          <el-option v-for="item in consultOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程简介">
        <el-input v-model="form.courseIntroduction" autocomplete="off" type="textarea" />
      </el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancle">取消</el-button>
				<el-button type="primary" @click="addform">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { getCurrentInstance, onMounted, reactive } from 'vue'
	import { ref } from 'vue'
	import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
	import type { ComponentSize } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue';  // 新增：导入Plus图标
  import http from '@/util/http';
  const baseURL = http.defaults.baseURL
  // 课程分类选项列表（[{label: '名称', value: 1}, ...]）
  const courseClassifyOptions = ref([]);
  // 心理导师选项列表
  const consultOptions = ref([]);

	const multipleTableRef = ref<TableInstance>()
	const queryInfo = reactive({
    pageSize: 10,
    pageNum: 1,
    // 修正搜索字段（与后端Course字段一致）
    courseName: '', // 课程名称（正确）
    courseClassify: null, // 课程分类ID（后端外键是courseClassify，而非courseClassifyId）
    // 心理导师名搜索：后端可能通过consultId关联，前端若按名称搜索，需后端接口支持
    consultId: null,
    // 移除前端自定义的错误字段（courseCount、learnCount等）
	});
	const tableData = ref([]);
	const total = ref(0);
	const Title = ref('')
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;

	const querydata = () => {
		axios.get('course/all', {
			params: queryInfo
		}).then((resp) => {
			if (resp.code == 200) {
				console.log(resp);
				tableData.value = resp.data.list;
				total.value = resp.data.total;
			}
		})
	}



	onMounted(() => {
		querydata();

    // 1. 获取课程分类列表
    axios.get('courseClassify/all').then(resp => {
      console.log(resp);
      if (resp.code === 200) {

        courseClassifyOptions.value = resp.data.list.map(item => ({
          label: item.classifyName,
          value: item.id // 分类ID（数字类型，与后端 courseClassify 匹配）
        }));
        console.log(courseClassifyOptions.value);
      }

    });

    // 2. 获取心理导师列表
    axios.get('course/psychologist', {
      params: {
        pageNum: 1,        // 页码，从1开始
        pageSize: 100   // 每页条数，设置为100
      }
    }).then(resp => {
      console.log(resp);
      if (resp.code === 200) {
        consultOptions.value = resp.data.map(item => ({
          label: item.consultName, // 假设导师名称字段是 consultName
          value: item.id // 导师ID（数字类型，与后端 consultId 匹配）
        }));
      }
    });
	})





	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)

	const handleSizeChange = (val : number) => {
		queryInfo.pageSize = val;
		querydata()
	}
	const handleCurrentChange = (val : number) => {
		queryInfo.pageNum = val;
		querydata()
	}


	const dialogFormVisible = ref(false)

	const formLabelWidth = '140px'

	const form = ref({
    id: null, // 主键（编辑时需要）
    courseName: "", // 课程名称
    thumbnail: "", // 缩略图（新增）
    courseTime: 0, // 课程时长
    videoNumber: 0, // 视频数量（原courseCount）
    studyNumber: 0, // 学习量（原learnCount）
    courseIntroduction: "", // 课程简介（原courseIntro）
    applyPeople: "", // 适用人群（原applicableGroup）
    studyGet: "", // 学习收获（原learningGain）
    subscribeNotice: "", // 订阅须知（原notice）
    beforePrice: 0, // 原价（新增）
    newPrice: 0, // 现价（原coursePrice）
    courseDiscount: 0, // 折扣价（新增）
    courseClassify:null, // 课程分类ID（原courseClassifyId）
    consultId: null, // 心理导师ID（前端可能漏了，需从consult对象取）
	})
	const add = () => {
		Title.value = '新增表单',
      cancle();
			dialogFormVisible.value = true
	}
	const cancle = () => {

		form.value = {
      id: null, // 主键（编辑时需要）
      courseName: "", // 课程名称
      thumbnail: "", // 缩略图（新增）
      courseTime: 0, // 课程时长
      videoNumber: 0, // 视频数量（原courseCount）
      studyNumber: 0, // 学习量（原learnCount）
      courseIntroduction: "", // 课程简介（原courseIntro）
      applyPeople: "", // 适用人群（原applicableGroup）
      studyGet: "", // 学习收获（原learningGain）
      subscribeNotice: "", // 订阅须知（原notice）
      beforePrice: 0, // 原价（新增）
      newPrice: 0, // 现价（原coursePrice）
      courseDiscount: 0, // 折扣价（新增）
      courseClassify:null, // 课程分类ID（原courseClassifyId）
      consultId: null, // 心理导师ID（前端可能漏了，需从consult对象取）
		}
		dialogFormVisible.value = false
	}


  const handleThumbnailUploadSuccess = (response) => {
    if (response.code === 200) {

      form.value.thumbnail = response.data; // 保存到thumbnail字段
      ElMessage.success('上传成功');
    } else {
      ElMessage.error(response.message || '上传失败');
    }
  };

  // 上传前校验（修改为处理缩略图）
  const beforeThumbnailUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJpgOrPng) {
      ElMessage.error('上传图片只能是 JPG/PNG 格式!');
      return false;
    }
    if (!isLt2M) {
      ElMessage.error('上传图片大小不能超过 2MB!');
      return false;
    }
    return true;
  };
	const addform = () => {
		if (form.value.id) {
			// 编辑操作
			axios.put('course', form.value).then((resp) => {
				if (resp.code == 200) {
					dialogFormVisible.value = false;
					querydata();
					ElMessage.success('编辑成功');
				} else {
					ElMessage.error('编辑失败');
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		} else {

			// 新增操作
			axios.post('course', form.value).then((resp) => {
				if (resp.code == 200) {
					dialogFormVisible.value = false;
					querydata();
					ElMessage.success('新增成功');
				} else {
					ElMessage.error('新增失败');
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		}
	}
	const editdata = (row) => {
		console.log(row);
		Title.value = "编辑咨询师"
		dialogFormVisible.value = true;
		form.value = row
	}

	const deletedata = (id) => {
		ElMessageBox.confirm(
			'确定要删除此课程吗？',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}
		).then(() => {
			axios.delete(`course/${id}`).then((resp) => {
				if (resp.code == 200) {
					querydata();
					ElMessage.success('删除成功');
				} else {
					ElMessage.error('删除失败');
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		}).catch(() => {
			// 用户取消操作
		})

	}

	const remove = () => {
		ElMessageBox.confirm(
			'确定要删除此课程吗？',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}
		).then(() => {
			axios.delete(`course/`, {
        data: multipleSelection.value // 直接传递 ID 数组
			}).then((resp) => {
				if (resp.code == 200) {
					querydata();
					ElMessage.success('删除成功');
				} else {
					ElMessage.error('删除失败');
					console.log(multipleSelection.value);
				}
			}).catch(error => {
				console.error('Error:', error);
				ElMessage.error('请求出错，请重试');
			})
		}).catch(() => {
			// 用户取消操作
		})

	}
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val.map(item => {
			return item.id
		})
	}
</script>

<style scoped>
.top {
	margin-bottom: 20px;
}
.form-search {
	background: #fff;
	padding: 20px 24px 0 24px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.middle {
	margin-bottom: 20px;
}
.course-table {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.demo-pagination-block {
	margin: 24px 0 0 0;
	text-align: right;
}
.dialog-form {
	padding-top: 10px;
}
.el-select {
	width: 150px;
}

.upload-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 修改上传容器相关样式 */
.upload-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%; /* 让上传容器适应父元素宽度 */
  box-sizing: border-box;
}

/* 缩略图上传器 */
.thumbnail-uploader {
  width: 100%; /* 改为100%适应父容器，避免固定宽度导致溢出 */
  max-width: 300px; /* 保留最大宽度限制 */
  height: 200px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s;
  box-sizing: border-box; /* 确保边框不增加额外宽度 */
}

/* 调整表单项目的对齐方式，避免标签与内容重叠 */
.el-form-item__content {
  margin-left: 110px !important; /* 与label-width保持一致 */
}

/* 响应式调整，在小屏幕下优化布局 */
@media (max-width: 768px) {
  .thumbnail-uploader {
    max-width: 100%;
    height: 160px;
  }
  .el-form-item__content {
    margin-left: 0 !important;
    margin-top: 8px;
  }
}

/* 缩略图预览 */
.thumbnail-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 占位符样式 */
.thumbnail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.upload-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 14px;
}

/* 提示文本 */
.upload-hint {
  font-size: 12px;
  color: #909399;
}

/* 表单项目对齐（可选） */
.form-item-align .el-form-item__content {
  display: flex;
  align-items: center;
}
</style>